<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <h1>{{w.nickname}}说:{{w.content}}</h1>
  <p>发布时间:{{w.created}}</p>
  <img v-for="url in w.urlArr" :src="url" width="200" alt="">
  <hr>
  <h2>评论相关</h2>
    <input type="text" v-model="comment.content" placeholder="评论点啥...">
    <input type="button" value="评论" @click="send()">
    <h3>评论列表</h3>
    <div v-for="c in arr">
        <h5>{{c.nickname}}评论说:{{c.content}}</h5>
        <span style="color: #666">{{c.created}}</span>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            w:{},
            comment:{
                content:"",
                weiboId:""
            },
            arr:[]
        },
        methods:{
            send(){
                if (v.comment.content.trim()==""){
                    alert("请输入评论的内容!")
                    return;
                }
                //把当前微博的id装进评论对象
                v.comment.weiboId = v.w.id;
                //发出请求
                axios.post("/comment/insert",v.comment).then(function (response) {
                    if (response.data==1){
                        alert("评论完成!");
                        location.reload();
                    }else{
                        alert("请先登录!");
                        location.href="/login.html";
                    }
                })

            }
        },
        created:function () {
            axios.get("/weibo/selectById"+location.search).then(function (response) {
               v.w = response.data;
               //给微博对象添加图片路径的数组
               v.w.urlArr = v.w.urls.split(",");
            })
            //请求所有评论的信息
            axios.get("/comment/selectByWeiboId"+location.search)
                                    .then(function (response) {
                v.arr = response.data;
            })
        }
    })
</script>
</body>
</html>